Angular-এ রাউট রেজলভার (Route Resolver) হল একটি বিশেষ ধরনের Angular সার্ভিস যা রাউটিং সিস্টেমের সাথে সংযুক্ত থাকে এবং রাউট লোড হওয়ার আগে নির্দিষ্ট ডেটা ফেচিং বা অ্যাসিনক্রোনাস অপারেশন সম্পন্ন করে। এটি একটি অ্যাঙ্গুলার রাউটের সাথে যুক্ত থাকে, যাতে ইউজার রাউটের টার্গেট কম্পোনেন্টে পৌঁছানোর আগেই প্রয়োজনীয় ডেটা লোড হয়ে যায়।

রাউট রেজলভার সাধারণত সেই ক্ষেত্রে ব্যবহার করা হয় যখন আপনার কম্পোনেন্টের জন্য কোন ডেটা সার্ভিস বা API কলের মাধ্যমে আসতে হবে এবং আপনি নিশ্চিত করতে চান যে কম্পোনেন্টটি শুধু ডেটা পাওয়ার পরই রেন্ডার হবে।

রাউট রেজলভার কিভাবে কাজ করে?

যখন Angular রাউটার কোন নতুন রাউট লোড করতে চায়, তখন আপনি একটি রেজলভার তৈরি করেন যা প্রয়োজনীয় ডেটা ফেচিং সম্পন্ন করবে। এই ডেটা ফেচিং সম্পন্ন হওয়ার পর রাউট রেন্ডার হবে।

রাউট রেজলভার সাধারণত resolve মেথডের মাধ্যমে কাজ করে যা একটি প্রমিস (Promise) বা Observable রিটার্ন করে। Angular রাউটার অপেক্ষা করবে যতক্ষণ না ডেটা লোড হয়ে যাবে এবং তারপর কম্পোনেন্টে নেভিগেট করবে।

রাউট রেজলভার তৈরি করা

১. রেজলভার সার্ভিস তৈরি করুন: প্রথমে একটি সার্ভিস তৈরি করতে হবে যেটি রেজলভার ফাংশনালিটি প্রদান করবে।

Angular CLI দিয়ে রেজলভার সার্ভিস তৈরি করতে:

ng generate service resolvers/data

এটি একটি data.resolver.ts নামক ফাইল তৈরি করবে।

২. রেজলভার সার্ভিসের কোড লিখুন: Resolve ইন্টারফেসটি ইমপ্লিমেন্ট করুন এবং resolve মেথডে ডেটা ফেচিং লজিক লিখুন।

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service'; // আপনার ডেটা সার্ভিস

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) {}

  resolve(): Observable<any> {
    return this.dataService.getData(); // এখানে আপনার API কল বা ডেটা ফেচিং কোড থাকবে
  }
}

এখানে:

• resolve মেথডটি একটি Observable বা Promise রিটার্ন করবে।
• DataService হল একটি সার্ভিস যা ডেটা ফেচিংয়ের জন্য ব্যবহার করা হবে (এটি আপনার API কল বা অন্য যেকোনো ডেটা রিটার্ন করতে পারে)।

রাউট কনফিগারেশন এবং রেজলভার ব্যবহার

একবার রেজলভার তৈরি হয়ে গেলে, এটি রাউট কনফিগারেশনে ব্যবহার করতে হবে যাতে রাউটের লোড হওয়ার সময় ডেটা ফেচিং হয়।

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DataResolver } from './resolvers/data.resolver';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    resolve: { data: DataResolver }  // রেজলভার যুক্ত করা হল
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• resolve প্রপার্টি ব্যবহার করে DataResolver রেজলভার অ্যাসাইন করা হয়েছে। এটি data নামে একটি প্রোপার্টি হিসাবে ডেটা রিটার্ন করবে।

কম্পোনেন্টে রেজলভড ডেটা ব্যবহার করা

এখন, HomeComponent-এ আমরা রেজলভড ডেটা ব্যবহার করতে পারি। Angular রাউটার স্বয়ংক্রিয়ভাবে এই ডেটা ActivatedRoute এর মাধ্যমে কম্পোনেন্টে ইনজেক্ট করবে।

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data['data']; // রেজলভড ডেটা অ্যাক্সেস করা
  }
}

এখানে, ActivatedRoute.snapshot.data['data'] থেকে আমরা DataResolver এর মাধ্যমে রিটার্ন করা ডেটা অ্যাক্সেস করছি।

রাউট রেজলভার এর সুবিধা

• এনটার্পাইজ অ্যাপ্লিকেশনগুলির জন্য উপকারী: যখন আপনার অ্যাপ্লিকেশনে একটি বা একাধিক ডেটা ফেচিং অপারেশন প্রয়োজন, রাউট রেজলভার এটি অ্যাসিঙ্ক্রোনাসভাবে হ্যান্ডেল করতে সাহায্য করে।
• ডেটা লোড হওয়ার আগে রেন্ডারিং বন্ধ: এই প্রক্রিয়া নিশ্চিত করে যে কম্পোনেন্টটি শুধুমাত্র তখনই রেন্ডার হবে যখন প্রয়োজনীয় ডেটা সম্পূর্ণভাবে লোড হয়ে যাবে।
• ডেটা ফেচিং লজিকের বিচ্ছিন্নতা: ডেটা ফেচিং লজিক কম্পোনেন্ট থেকে সরিয়ে সার্ভিসে রাখা যায়, যা কোডকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে।

সারাংশ

রাউট রেজলভার Angular অ্যাপ্লিকেশনগুলিতে ডেটা ফেচিং বা অন্যান্য অ্যাসিনক্রোনাস কাজগুলি সম্পন্ন করার জন্য ব্যবহৃত হয়। এটি রাউট লোড হওয়ার আগে নির্দিষ্ট ডেটা রিটার্ন করে এবং কম্পোনেন্টটিকে ডেটা রেন্ডার করার আগে একে প্রি-লোড করতে সহায়ক। এটি Angular অ্যাপ্লিকেশনের কর্মক্ষমতা এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।